<template>
  <div class="first_level_page">
    <head-top></head-top>
    <carousel class="marginTop adCarousel" :responsive="44" :indicators="true" :auto="20000">
      <div>
        <div class="to_forget">
          <img src="../../images/slider1.jpg" />
        </div>
        <div class="to_forget">
          <img src="../../images/slider2.jpg" />
        </div>
      </div>
    </carousel>
    <nav class="home_nav">
      <div @click="comingSoon" class="nav_div">
        <img src="../../images/navBrand.png" />
        <div class="nav_text">品牌专区</div>
      </div>
      <router-link to="/order" class="nav_div">
        <img src="../../images/navOrder.png" />
        <div class="nav_text">我的订单</div>
      </router-link>
      <router-link :to="{path: '/offenList', query: {flag:1,key:''}}" class="nav_div">
        <img src="../../images/navOffen.png" />
        <div class="nav_text">常购清单</div>
      </router-link>
      <div @click="comingSoon" class="nav_div">
        <img src="../../images/navStatistics.png" />
        <div class="nav_text">订单统计</div>
      </div>
    </nav>
    <!-- 活动专区 -->
    <section class="home_section promotion_section">
      <div class="section_top">
        <div class="title">活动专区</div>
      </div>
      <carousel :responsive="37.3333" :indicators="true" :auto="30000">
        <div>
          <a target="_blank" class="to_forget">
            <img src="../../images/slider3.jpg" />
          </a>
        </div>
      </carousel>
    </section>
    <!-- 热销商品 -->
    <section class="home_section promotion_section">
      <div class="section_top">
        <div class="title">
          限时秒杀
        <div id="div1">{{startTime}} 抢购中</div>
          <van-count-down :time="time" auto-start @finish="finish">
            <template v-slot="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </div>
      </div>
      <div class="section_main">
        <dl class="goods_dl left" @click="toGoodsDetail(h.id)" v-for="h in hotgoodsList.goods" :key="h.id">
          <div>
            <dt class="goods_dt">
              <img :src="h.goodsImgUrl" onerror="this.src='http://image.qtusoft.com/1.png'"/>
            </dt>
            <dd class="goods_dd">
              <div class="goods_name">{{h.goodsName}}</div>
              <div class="goods_price">
                ￥{{h.price}}
                <span id="s">￥{{h.oldPrice}}</span>
              </div>
            </dd>
          </div>
        </dl>
        <div class="clear"></div>
      </div>
    </section>
    <!-- 新品推荐 -->
    <section class="home_section promotion_section">
      <div class="section_top">
        <div class="title">新品推荐</div>
        <!-- this.$router.push({path: '/goodsList', query: {flag:4,key:this.cond}}); -->
        <router-link :to="{path: '/goodsList', query: {flag:2,key:''}}" class="more">
          <span>更多</span>
          <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 18 20">
            <polyline points="0,0 14,10 0,20" style="fill:none;stroke:rgb(153,153,153);stroke-width:4"/>
          </svg>
        </router-link>
      </div>
      <div class="section_main">
        <dl class="goods_dl left" @click="toGoodsDetail(g.id)" v-for="g in goodsList" :key="g.id">
          <div>
            <dt class="goods_dt">
              <img :src="g.goodsImgUrl" onerror="this.src='http://image.qtusoft.com/1.png'" />
            </dt>
            <dd class="goods_dd">
              <div class="goods_name">{{g.goodsName}}</div>
              <div class="goods_price">
                ￥{{g.price}}
                <span id="s">￥{{g.oldPrice}}</span>
              </div>
            </dd>
          </div>
        </dl>
        <div class="clear"></div>
      </div>
    </section>
    <alert-tip v-if="showAlert" @closeTip="showAlert = false" :alertText="alertText"></alert-tip>
    <div class="heightBottom"></div>

    <transition name="loading">
      <loading v-if="showLoading"></loading>
    </transition>

    <foot-guide></foot-guide>
  </div>
</template>

<script>
import { mapState } from "vuex";
import headTop from "src/components/header/head";
import footGuide from "src/components/footer/footGuide";
import Carousel from "vue-m-carousel";
import alertTip from "src/components/common/alertTip";
import { defaultImg, defaultCarouselImg } from "src/config/env";
import {
  getSellerIndex,
  getHotGoods,
  getGoodsList,
  getHotGoodsAgain
} from "../../service/getData";
import { imgToSamll } from "src/config/mUtils";
import loading from "src/components/common/loading";

export default {
  data() {
    return {
      adlist: 1, //轮播图列表
      goodsList: [], //推荐商品列表
      hotgoodsList: [], //热销商品列表
      flag: 1, //跳转页面标记 1.热销商品页面  2.新品推荐页面
      goodsId: 0, // 商品id
      showAlert: false,
      alertText: "",
      showLoading: true, //显示加载动画,
      killIds:null,
      newIds: null,
      time: 7200000,
      startTime:'',
      /*  */
    };
  },
  created() {
    //created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
  },
  mounted() {
    //mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
    document.body.scrollTop = 0;
    this.getMySellerIndex();
  },
  components: {
    headTop,
    footGuide,
    Carousel,
    alertTip,
    loading
  },
  computed: {
    ...mapState(["userInfo"])
  },
  methods: {
    //获取商家首页内容
    async getMySellerIndex() {
      var status = sessionStorage.getItem("status");
      if(status == 401){
        location.href='http://localhost:8700/#/login?redirect=%2Fhome'
        return;
      }
      //token
      var sellerInfo = JSON.parse(localStorage.getItem("sellerInfo"));
      this.showLoading = false;
      this.killIds = sessionStorage.getItem("killIds");//从session域中获取值
      this.hotgoodsList = await getHotGoods(sellerInfo.token,this.killIds);//异步请求 
      this.startTime = this.hotgoodsList.startTime;
      //session域存值
      sessionStorage.setItem("killIds",this.hotgoodsList.goods[0].id+","+this.hotgoodsList.goods[1].id+","+this.hotgoodsList.goods[2].id);

      this.newIds = sessionStorage.getItem("newIds");
      this.goodsList = await getGoodsList(sellerInfo.token,this.newIds);
      sessionStorage.setItem("newIds",this.goodsList[0].id+","+this.goodsList[1].id+","+this.goodsList[2].id);

 },
    toGoodsDetail(id) {
      var status = sessionStorage.getItem("status");
      if(status == 401){
        location.href='http://localhost:8700/#/login?redirect=%2Fhome'
        return;
      }
      //路由传值
      this.$router.push({ path: "/goodsDetail", query: { goodId: id } });
    },
    comingSoon() {
      //敬请期待
      this.showAlert = true;
      this.alertText = "敬请期待";
    },
    async search(item) {
      this.$router.push({ path: "/goodsDetail", query: {} });
    },
    //倒计时结束触发
    async finish() {
      //token
      var sellerInfo = JSON.parse(localStorage.getItem("sellerInfo"));
      console.log("倒计时结束触发");
      // if(this.hotgoodsList.length != 0){
      //   this.hotgoodsList = await getHotGoods(sellerInfo.token,this.killIds);
      // }
    }
  },
  watch: {}
};
</script>

<style lang="less">

.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 26px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  background-color: #ee0a24;
}

#s {
  font-size: 12px;
  color: grey;
  text-decoration: line-through;
}
.carousel {
  width: 100%;
  background: $bgColor;
  .carousel-indicators {
    position: absolute;
    height: 0.14rem;
    bottom: 0.2rem;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 0;
    line-height: 0;
  }
  .carousel-item div {
    width: 100%;
    height: 100%;
  }
  .carousel-item div img {
    width: 100%;
    height: 100%;
  }
  .carousel-dot {
    width: 0.14rem;
    height: 0.14rem;
    margin: 0 0.14rem;
    background: rgba(233, 233, 233, 1);
    border-radius: 0.07rem;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
  }
  .carousel-dot.active {
    background: rgba(233, 233, 233, 0.4);
  }
}
</style>
<style lang="scss" scoped>
@import "src/style/mixin";
.home_nav {
  clear: both;
  background: #fff;
  @include wh(100%, 2rem);
  .nav_div {
    float: left;
    width: 25%;
    text-align: center;
    img {
      display: block;
      margin: 0 auto;
      margin-top: 0.32rem;
      margin-bottom: 0.2rem;
      @include wh(0.9rem, 0.9rem);
    }
    .nav_text {
      @include sc(0.24rem, #333);
      line-height: 0.24rem;
    }
  }
}
.home_section {
  margin-top: 0.2rem;
  .section_top {
    clear: both;
    background: #fff;
    position: relative;
    @include wh(100%, 0.8rem);
    .title {
      float: left;
      text-align: left;
      @include sc(0.3rem, #333);
      font-weight: bold;
      line-height: 0.8rem;
      padding-left: 0.2rem;
    }
    .van-count-down {
      position: absolute;
      right: 5px;
      top: 0;
    }
    #div1 {
      position: absolute;
      left: 125px;
      top: 0;
      color: red;
      font-size: 17px;
      font-weight: 700;
    }
    .more {
      float: right;
      text-align: right;
      line-height: 0.8rem;
      @include sc(0.26rem, #999);
      svg {
        @include wh(0.14rem, 0.2rem);
        margin-left: 0.1rem;
        margin-right: 0.2rem;
      }
    }
  }
  .section_main {
    width: 100%;
    margin-top: 0.01rem;
    .goods_dl {
      background: #fff;
      width: 33.33%;
      border: 0.01rem solid $bgColor;
      border-left: none;
      border-bottom: none;
      .goods_dt {
        height: 2.98rem;
        width: 100%;
        text-align: center;
        img {
          width: 91.6%;
          margin-top: 0.345rem;
        }
      }
      .goods_dd {
        padding: 0 0.2rem;
        .goods_name {
          @include sc(0.26rem, #333);
          line-height: 0.315rem;
          height: 0.6rem;
          overflow: hidden;
        }
        .goods_price {
          @include sc(0.32rem, #ffa101);
          line-height: 0.92rem;
        }
      }
    }
    .goods_dl:nth-child(3n) {
      border-right: none;
    }
  }
}
</style>
